<template>
	<view class="page-container profile-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="修改头像" @clickLeft="goBack" />
		<uni-forms ref="baseForm" class='baseForm'>
			<view class="mt-2 bg-white fs_15">
				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="头像" name="avatarImg">
						<text class="text-grey-700 fs_15" slot="label">头像</text>
						<image class="image avatar ml-auto" :src="avatarImg" mode="aspectFill"
							@click="changeImg('avatarImg')"></image>
					</uni-forms-item>
				</view>

				<view class="profile-cell d-flex align-items-center pl-3 pr-3">
					<uni-forms-item label="昵称" name="nickName">
						<text class="text-grey-700 fs_15" slot="label">昵称</text>
						<uni-easyinput v-model="name" :clearable="false" :inputBorder="false" placeholder="请填写昵称" />
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>
		<!-- 保存 -->
		<view class="p-btn save">
			<view class="my-btn bg-primary-600 px-2 py-3 fs_16" type="primary" size="mini" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarImg: "",
				hideAvatarImg: "",
				name: ""
			}
		},
		onLoad(options) {
			this.getUserCenter();
		},
		methods: {
			// 获取用户中心
			getUserCenter() {
				let _this = this;
				this.$api.profileUserCenter().then(res => {
					if (res.code === 200) {
						_this.avatarImg = res.data.avatarUrl || require("@/static/profile.jpg"),
							_this.name = res.data.weChaName;
						console.log('nickname', _this.nickname)
					}
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 提交保存
			submit(ref) {
				uni.showToast({
					title: '加载中……',
					icon: 'loading',
					duration: 3000,
				})
				if (!this.avatarImg) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					});
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return
				}
				let newAvatarImg = this.avatarImg.split('?')[0];
				let params = {
					name: this.name,
					avatarUrl: newAvatarImg,
				}
				// this.$refs[ref].validate().then(res => {
				this.$api.setUserCenter(params).then((res) => {
					if (res.code == 200) {
						uni.hideToast();
						uni.showToast({
							title: '保存成功'
						});

						setTimeout(() => {
							uni.navigateBack({
								success: () => {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) {
										return;
									} else {
										page.onLoad(page.options); // page自带options对象.
									}
								}
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					// })
				}).catch(err => {
					uni.hideToast();
					// console.log('err', err);
				})
			},
			// 修改图片
			changeImg(pathName) {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						try {
							// console.log('chooseImageRes',chooseImageRes);
							uni.showLoading({
								title: "上传中...",
								mask: true,
							});
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							const tempFiles = chooseImageRes.tempFiles[0];
							_this.upload(pathName, tempFilePaths, tempFiles);
						} catch (e) {
							console.log(e);
						} finally {
							uni.hideLoading();
						}
					}
				});
			},

			// 上传方法
			upload(dataName, path, file) {
				var _this = this;
				var COS = require('cos-wx-sdk-v5');
				var cos = new COS({
					SecretId: this.$globalUrl.COSParams.SecretId,
					SecretKey: this.$globalUrl.COSParams.SecretKey
				});
				// _this.Fun.loading("正在上传");// 此处替换为你自己的加载提示方法
				let fileName = file.path.substr(file.path.lastIndexOf('/') + 1);
				cos.postObject({
						Bucket: this.$globalUrl.COSParams.Bucket, // 你的储存桶
						Region: this.$globalUrl.COSParams.Region, // 你的储存区域
						Key: `/avatar/${fileName}`,
						FilePath: path,
						// Body: file
						onProgress: function(info) {
							// console.log("[cos.postObject-seccess]",JSON.stringify(info));
						}
					},
					function(err, data) {
						if (err == null) {
							let avatarImg = 'https://' + data.Location;
							_this.$api.getImgPath(avatarImg).then(res => {
								if (res.code === 200) {
									_this.avatarImg = res.data;
								}
							})
						} else {
							console.log('err', err)
						}
					}
				)
			},
		}
	}
</script>

<style>

</style>
